<script setup lang="ts">
import {computed} from 'vue';
import {storeToRefs} from "pinia";
import {useMaterialInstanceStore} from "@/stores/material.instance"
import ButtonMaterialSetter from "@/material/common-setter/ButtonMaterialSetter.vue";
import GridMaterialSetter from "@/material/layout-setter/GridMaterialSetter.vue";
import InputMaterialSetter from "@/material/form-setter/InputMaterialSetter.vue";
import BaseContainerMaterialSetter from "@/material/container-setter/BaseContainerMaterialSetter.vue";
import TextareaMaterialSetter from "@/material/form-setter/TextareaMaterialSetter.vue";

const materialInstanceStore = useMaterialInstanceStore();
const {selectedMaterialInstance} = storeToRefs(materialInstanceStore);
const materialSetter = computed(()=>{
  if(selectedMaterialInstance.value){
    switch (selectedMaterialInstance.value.type){
      case 'button': return ButtonMaterialSetter;
      case 'grid': return GridMaterialSetter;
      case 'input': return InputMaterialSetter;
      case 'textarea': return TextareaMaterialSetter;
      case 'baseContainer': return BaseContainerMaterialSetter;
      default : return null;
    }
  }
  return null;
});
const handleChange = (content: any) =>{
  console.log('MaterialSetter：', content, selectedMaterialInstance.value)
}
</script>

<template>
  <div class="zhtt-matterial-setter">
    <component :is="materialSetter" :material="selectedMaterialInstance"  @change="handleChange"></component>
  </div>
</template>

<style scoped>

</style>
